<template>
  <div class="userDialog" v-if="showDialog">
    <el-dialog
      customClass="elc-dialog"
      :close-on-click-modal="false"
      :title="title"
      :visible.sync="dialogVisible"
      width="600px"
      @close="cancel"
    >
      <div class="form-box">
        <el-form
          ref="formDataRef"
          :rules="rules"
          :model="form"
          label-width="120px"
        >
          <el-form-item label="账号：" prop="name">
            <el-input v-model="form.name" placeholder="请输入账号" />
          </el-form-item>
          <el-form-item label="用户名：" prop="fullName">
            <el-input
              type="text"
              v-model="form.fullName"
              placeholder="请输入用户名"
            />
          </el-form-item>
          <el-form-item label="密码：" prop="password" class="pwd-box">
            <el-input
              v-model="form.password"
              :type="pwdType"
              placeholder="请输入密码"
              name="password"
              auto-complete="new-password"
            >
            </el-input>
            <span class="show-pwd" @click="showPwd">
              <svg-icon icon-class="eye" />
            </span>
          </el-form-item>
          <el-form-item label="所属角色：" prop="roleIds">
            <el-select
              v-model="form.roleIds"
              filterable
              clearable
              placeholder="请选择角色"
            >
              <el-option
                v-for="item in roles"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button @click="save" type="primary">确认</el-button>
        <el-button type="info" @click="cancel">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from "@/api/user";
import { getRoleList } from "@/api/role.js";
export default {
  data() {
    return {
      rules: {
        name: [{ required: true, message: "请输入账号！", trigger: "blur" }],
        password: [
          { required: true, message: "密码不能为空！", trigger: "blur" },
          { min: 6, message: "密码长度最少为6位", trigger: "blur" },
        ],
        fullName: [
          { required: true, message: "用户名不能为空！", trigger: "blur" },
        ],
        roleIds: [
          { required: true, message: "请选择所属角色！", trigger: "blur" },
        ],
      },
      roles: [],
      title: "",
      showDialog: false,
      dialogVisible: true,
      form: {
        fullName: "",
        name: "",
        password: "",
        roleIds: [],
      },
      pwdType: "password",
      isEdit: false,
    };
  },
  methods: {
    getRoles() {
      let params = {
        currentPage: 1,
        pageSize: 10000,
        roleName: "",
        enableFlag: "",
      };
      getRoleList(params).then((res) => {
        this.roles = res.data.rows;
      });
    },
    showPwd() {
      if (this.pwdType === "password") {
        this.pwdType = "";
      } else {
        this.pwdType = "password";
      }
    },
    show(obj) {
      this.title = obj.title;
      this.isEdit = obj.isEdit;
      if (this.isEdit) {
        // 编辑
        this.form = Object.assign(obj.row) || {};
      }
      this.getRoles();
      this.showDialog = true;
    },
    save() {
      this.$refs["formDataRef"].validate((valid) => {
        if (valid) {
          if (this.isEdit) {
            // 编辑
            this.form.roleIds = [this.form.roleIds];
            this.form.enableFlag = "y";
            update(this.form).then((res) => {
              if (res.code == 200) {
                this.cancel();
                this.$parent.getList();
              }
            });
          } else {
            this.form.roleIds = [this.form.roleIds];
            add(this.form).then((res) => {
              if (res.code == 200) {
                this.cancel();
                this.$parent.getList();
              }
            });
          }
        }
      });
    },
    cancel() {
      this.$refs["formDataRef"].resetFields();
      Object.assign(this.$data, this.$options.data());
      // this.showDialog = false;
    },
  },
};
</script>

<style lang="less" scoped>
::v-deep.pwd-box {
  position: relative;
  .el-form-item__content {
    .el-input__inner {
      padding: 0 40px 0 15px;
    }
  }
  .show-pwd {
    position: absolute;
    right: 15px;
    cursor: pointer;
  }
}
.userDialog {
  .el-select,
  .el-cascader {
    width: 100%;
  }
  .avatar-box {
    display: flex;
    align-items: center;
    .img-box {
      display: inline-block;
      width: 50px;
      height: 50px;
      border: 1px dashed #ccc;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      cursor: pointer;
      font-size: 12px;
      margin-right: 20px;
      &:hover {
        border-color: #333;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: fill;
        border-radius: 50%;
      }
    }
  }
}
.imagesLists {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 0 0 20px 20px;
  li {
    margin-right: 20px;
    margin-bottom: 20px;
    cursor: pointer;
  }
}
.tree-border {
  max-height: 160px;
  overflow-y: auto;
}
::v-deep.row-from {
  border: 1px solid #f2f2f2;
  padding-right: 20px;
  position: relative;
  .el-form-item {
    display: flex;
    flex-direction: column;
    width: 50%;
    .el-form-item__content {
      margin-left: 20px !important;
    }
  }
  .top-btn {
    position: absolute;
    right: 0px;
    top: 4px;
    span {
      padding-right: 4px;
      cursor: pointer;
      i {
        font-size: 20px;
        color: rgba(73, 134, 255, 0.6);
      }
    }
  }
}
</style>
